﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Jquery Widgets</title>
    <link href="../../js/jqx/styles/jqx.base.css" rel="stylesheet" type="text/css" />    
    <!-- jq-->
    <script src="../../js/jq/jquery.lastest.js" type="text/javascript"></script>
    <!-- jqwidgets-->
    <script src="../../js/jqx/jqx-all.js" type="text/javascript"></script>
    <!-- custom js-->
    <script src="../../js/core/rms.core.js" type="text/javascript"></script>
    <script src="../../js/core/rms.basecontrol.js" type="text/javascript"></script>    
    <script src="../../js/core/rms.control.js" type="text/javascript"></script>
    <script src="../../js/core/rms.entry.js" type="text/javascript"></script>
    <style> 
        html, body
        {
            margin: 0px;
            padding: 0px;
            width: 100%;
            height: 100%;
            overflow: hidden;
        }
        #entry{
            margin: 0px;
            padding: 0px;
            width: 100%;
            height: 100%;
            overflow: hidden;
        }
        #bodySplitter {
            width: 100%;
            height: 100%;
        }                                                       
        fieldset{               
            display: block;
            border: 0px solid;
        }
        div.row{
           display: block;
           margin: 3px 2px;
           float: left;
           width: 300px;            
        }
    </style>
    <script type="text/javascript">
        //combobox renderer
        function customComboxboRenderer(index, label, value) {            
            return '<span>Hello&nbsp;</span><span>'+label+'</span>';            
        };
        $(function () {
            var entry = new RMS.CEntry({ id: '#entry' });
            $('#mainSplitter').jqxSplitter('collapse');
        });
    </script>
</head>
<body>    
    <div id="entry">            
        <div id="bodySplitter" data-meta='{"type": 72, "width":"100%","height":"100%","orientation":"horizontal","splitBarSize":2,"showSplitBar":true,"panels": [{"size":"10%"}, {"size": "80%" }]}'>
            <div>
                <div id='main_menu' style='visibility: visible;' data-meta='{"type":46,"width":"100%","height":"30px"}'>
                    <ul>
                        <li><a href="#Home">Home</a></li>
                        <li>Solutions
                            <ul style='width: 250px;'>
                                <li><a href="#Education">Education</a></li>
                                <li><a href="#Financial">Financial services</a></li>
                                <li><a href="#Government">Government</a></li>
                                <li><a href="#Manufacturing">Manufacturing</a></li>
                                <li type='separator'></li>
                                <li>Software Solutions
                                    <ul style='width: 220px;'>
                                        <li><a href="#ConsumerPhoto">Consumer photo and video</a></li>
                                        <li><a href="#Mobile">Mobile</a></li>
                                        <li><a href="#RIA">Rich Internet applications</a></li>
                                        <li><a href="#TechnicalCommunication">Technical communication</a></li>
                                        <li><a href="#Training">Training and eLearning</a></li>
                                        <li><a href="#WebConferencing">Web conferencing</a></li>
                                    </ul>
                                </li>
                                <li><a href="#">All industries and solutions</a></li>
                            </ul>
                        </li>
                        <li>Products
                            <ul>
                                <li><a href="#PCProducts">PC products</a></li>
                                <li><a href="#MobileProducts">Mobile products</a></li>
                                <li><a href="#AllProducts">All products</a></li>
                            </ul>
                        </li>
                        <li>Support
                            <ul style='width: 200px;'>
                                <li><a href="#SupportHome">Support home</a></li>
                                <li><a href="#CustomerService">Customer Service</a></li>
                                <li><a href="#KB">Knowledge base</a></li>
                                <li><a href="#Books">Books</a></li>
                                <li><a href="#Training">Training and certification</a></li>
                                <li><a href="#SupportPrograms">Support programs</a></li>
                                <li><a href="#Forums">Forums</a></li>
                                <li><a href="#Documentation">Documentation</a></li>
                                <li><a href="#Updates">Updates</a></li>
                            </ul>
                        </li>
                        <li>Communities
                            <ul style='width: 200px;'>
                                <li><a href="#Designers">Designers</a></li>
                                <li><a href="#Developers">Developers</a></li>
                                <li><a href="#Educators">Educators and students</a></li>
                                <li><a href="#Partners">Partners</a></li>
                                <li type='separator'></li>
                                <li>By resource
                                    <ul>
                                        <li><a href="#Labs">Labs</a></li>
                                        <li><a href="#TV">TV</a></li>
                                        <li><a href="#Forums">Forums</a></li>
                                        <li><a href="#Exchange">Exchange</a></li>
                                        <li><a href="#Blogs">Blogs</a></li>
                                        <li><a href="#Experience Design">Experience Design</a></li>
                                    </ul>
                                </li>
                            </ul>
                        </li>
                        <li>Company
                            <ul style='width: 180px;'>
                                <li><a href="#About">About Us</a></li>
                                <li><a href="#Press">Press</a></li>
                                <li><a href="#Investor">Investor Relations</a></li>
                                <li><a href="#CorporateAffairs">Corporate Affairs</a></li>
                                <li><a href="#Careers">Careers</a></li>
                                <li><a href="#Showcase">Showcase</a></li>
                                <li><a href="#Events">Events</a></li>
                                <li><a href="#ContactUs">Contact Us</a></li>
                                <li><a href="#Become an affiliate">Become an affiliate</a></li>
                            </ul>
                        </li>
                    </ul>
                </div>    
            </div>
            <div>
               <div id="mainSplitter" data-meta='{"type": 72, "width":"100%","splitBarSize":4,"panels": [{ "size": 200 }, { "size": 200 }]}'>
                    <div>
                        <div id='jqxNavigationBar' data-meta='{"type":64, "height":"100%", "width": "100%", "expandMode": "singleFitHeight"}'>
                            <!--Header-->
                            <div>
                                Early History of the Internet
                            </div>
                            <!--Content-->
                            <div>
                                <ul>
                                    <li>1961 First packet-switching papers</li>
                                    <li>1966 Merit Network founded</li>
                                </ul>
                            </div>
                            <!--Header-->
                            <div>
                                Merging the networks and ...
                            </div>
                            <!--Content-->
                            <div>
                                <ul>
                                    <li>1981 Computer Science Network (CSNET)</li>
                                    <li>1982 TCP/IP protocol suite formalized</li>
                                </ul>
                            </div>
                            <!--Header-->
                            <div>
                                Popular Internet services
                            </div>
                            <!--Content-->
                            <div>
                                <ul>
                                    <li>1990 IMDb Internet movie database</li>
                                    <li>1995 Amazon.com online retailer</li>
                                    <li>1995 eBay online auction and shopping</li>
                                    <li>1995 Craigslist classified advertisements</li>                                   
                                </ul>
                            </div>
                        </div>
                    </div>
                    <div>
                        <div class="jqx-hideborder jqx-hidescrollbars" id="tabs" data-meta='{"type": 51, selectedItem: 4}'>
                            <ul>
                                <li style="margin-left: 10px;">Input</li>
                                <li>Combobox</li>
                                <li>Dropdownlist</li>
                                <li>Listbox</li>
                                <li>Tree</li>
                            </ul>
                            <div>
                                <fieldset>                                   
                                    <div class="row">
                                        <input type="text" id="input" style="width:200px;height:24px;" data-meta='{"type": 1}' />           
                                    </div>
                                    <div class="row">
                                        <div id='datetime' data-meta='{"type": 11}'></div>
                                    </div>
                                    <div class="row">
                                        <div id='time' data-meta='{"type":12}'></div>
                                    </div>
                                    <div class="row">
                                        <div id='calendar' style="width: 220px; height: 220px" data-meta='{"type": 13}'></div>
                                    </div>
                                </fieldset>
                            </div>
                            <div>
                                <fieldset>             
                                    <div class="row">
                                        Combobox
                                        <div id='comboxbox21' style="width:200px;" data-meta='{"type": 21, "displayMember": "Name", "valueMember": "ID" }' data-request='"ResourceID":1'></div>
                                    </div>
                                    <div class="row">
                                        Combobox renderer
                                        <div id='combobox21render' style="width:200px;" data-meta='{"type": 21, "displayMember": "Name", "valueMember": "ID",renderer:customComboxboRenderer }' data-request='"ResourceID":1'></div>
                                    </div>
                                    <div class="row">
                                        Multi select
                                        <div id='comboxbox211' style="width:200px;" data-meta='{"type": 21, "multiSelect": true}' data-request='"ResourceID":1'></div>
                                    </div>
                                    <div class="row">
                                        Multi select with Ajax
                                        <div id='comboxbox212' style="width:200px;" data-meta='{"type": 22, "multiSelect": true,"source": {"datatype":"csv","url": "../../mods/real.world.app/portfolio/service/data.ashx","action":"getInfo"}}'></div>
                                    </div>
                                    <div class="row">
                                        Checkbox with Ajax
                                        <div id='comboxboxajax' style="width:200px;" data-meta='{"type": 22,"checkboxes": true, "source": {"datatype":"csv","url": "../../mods/real.world.app/portfolio/service/data.ashx","action":"getInfo"}}'></div>
                                    </div>
                                    <div class="row">
                                        Group
                                        <div id='comboxboxcat' style="width:200px;" data-meta='{"type": 23}' data-request='"ResourceID":1'></div>
                                    </div>
                                    <div class="row">
                                        Checkbox with resource
                                        <div id='comboxboxcheckbox' style="width:200px;" data-meta='{"type": 21,"checkboxes": true}' data-request='"ResourceID":1'></div>
                                    </div>
                                </fieldset>    
                            </div>
                            <div>
                                <fieldset>                                   
                                    <div class="row">
                                        dropdown
                                        <div id="dropdownlist1" style="width:200px;height:24px;" data-meta='{type:25,autoOpen: true,checkboxes: true, "displayMember": "Name", "valueMember": "ID"}' data-request='"ResourceID":1' ></div>
                                    </div>
                                    <div class="row">
                                        dropdown ajax
                                        <div id="dropdownlist2" style="width:200px;height:24px;" data-meta='{type:26, checkboxes: true,"displayMember": "Name", "valueMember": "ID","source": {"datatype":"csv","url": "../../mods/real.world.app/portfolio/service/data.ashx","action":"getInfo"}}' ></div>           
                                    </div>
                                    <div class="row">
                                        dropdown renderer
                                        <div id='dropdownlist3' style="width:200px;" data-meta='{"type": 25, "displayMember": "Name", "valueMember": "ID",renderer:customComboxboRenderer }' data-request='"ResourceID":1'></div>
                                    </div>
                                </fieldset>
                            </div>
                            <div>
                                <fieldset>
                                    <div class="row">
                                        Listbox 
                                        <div id='listbox1' style="height: 50px" data-meta='{type: 121, allowDrop: true, allowDrag: true, height: "100px"}' data-request='"ResourceID":1'></div>                                       
                                    </div>
                                    <div class="row">
                                        Listbox ajax, multi
                                        <div id='listbox2' style="height: 50px" data-meta='{type: 121, multiple:true, height: "100px","source": {"datatype":"csv","url": "../../mods/real.world.app/portfolio/service/data.ashx","action":"getInfo"}}'></div>                                       
                                    </div>
                                    <div class="row">
                                        Listbox ajax, checkbox
                                        <div id='listbox4' style="height: 50px" data-meta='{type: 121, checkboxes:true, height: "100px","source": {"datatype":"csv","url": "../../mods/real.world.app/portfolio/service/data.ashx","action":"getInfo"}}'></div>                                       
                                    </div>
                                    <div class="row">
                                        Listbox drap & drop
                                        <div id='listbox3' style="height: 50px" data-meta='{type: 122, height: "100px"}' data-request='"ResourceID":1'></div>                                                                               
                                    </div>
                                    <div class="row">
                                        Listbox ajax, ctrl, shift
                                        <div id='listbox5' style="height: 50px" data-meta='{type: 123, height: "100px","source": {"datatype":"csv","url": "../../mods/real.world.app/portfolio/service/data.ashx","action":"getInfo"}}'></div>                                       
                                    </div>
                                </fieldset>
                            </div>
                            <div>
                                <fieldset>
                                    <div class="row">
                                        Tree
                                        <div style="border: none;" id='tree' data-meta='{type: 41, width: "200px", height: "200px"}' data-request='"ResourceID":2'></div>                                        
                                    </div>
                                    <div class="row">
                                        Tree ajax
                                        <div style="border: none;" id='treeajax' data-meta='{type: 41, width: "200px", height: "200px","source": {"url": "../../mods/real.world.app/portfolio/service/data.ashx","action":"getInfo"}}'></div>
                                    </div>                                    
                                </fieldset>
                            </div>
                        </div>
                    </div>
                </div> 
            </div>
        </div>           
    </div>   
</body>
</html>
